<!--  -->
<template>
  <div class="anov-guide">
    <div class="anov-modal-icon-wrapper">
      <div class="anov-modal-circle-o"></div>
      <div class="anov-modal-circle-i"></div>
      <i class="platformicon icon_jinggao anov-modal-icon"></i>
    </div>
    <div class="anov-guide-wrapper">
      <p class="anov-guide-label">{{ label }}</p>
      <p class="anov-guide-text">
        欢迎使用 ANOV-DEV，当前版本为<span class="anov-guide-point">
          {{ version }}</span
        >
        为了更好的了解和熟悉 ANOV-DEV 功能，可以按下<span
          class="anov-guide-point"
        >
          {{ shortKey }}</span
        >
        组合快捷键或者点击下方
        <span class="anov-guide-point"> {{ $t('cmlpanel.confirm') }} </span
        >按钮直接打开控制面板， 体验平台功能！
      </p>
    </div>
    <div class="anov-guide-btn">
      <div @click="cancel" class="anov-modal-btn">
        {{ $t('cmlpanel.cancel') }}
      </div>
      <div @click="confirm" class="anov-modal-btn">
        {{ $t('cmlpanel.confirm') }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'guide',
  components: {},
  data() {
    return {
      label: '温馨提示',
      version: 'V' + __ANOV__ENV.platformVersion,
      shortKey: 'CTRL + O'
    }
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      this.tl = new TimelineMax({
        autoRemoveChildren: true,
        onStart: function () {}
      })
      let tw1 = TweenMax.to('.anov-guide', 0.3, { opacity: 1 })
      let tw4 = TweenMax.to('.anov-guide .anov-modal-icon-wrapper', 0.3, {
        scale: 1,
        opacity: 1,
        ease: Power0.easeInOut
      })
      let tw5 = TweenMax.to('.anov-guide .anov-modal-icon', 0.2, {
        opacity: 1,
        scale: 1
      })
      let tw8 = TweenMax.to('.anov-guide .anov-guide-wrapper', 0.3, {
        opacity: 1
      })
      let tw9 = TweenMax.staggerTo(
        '.anov-guide .anov-modal-btn',
        0.3,
        { opacity: 1 },
        0.3
      )
      this.tl.addLabel('start')
      this.tl
        .add(tw1, 'start+=0')
        .add(tw4, 'start+=0.1')
        .add(tw5, 'start+=0.2')
        .add(tw8, 'start+=.4')
        .add(tw9, 'start+=.4')
    },
    reset() {
      this.tl.reverse()
      TweenMax.set('.anov-guide', { opacity: 0 })
      TweenMax.set('.anov-guide .anov-modal-icon-wrapper', {
        scale: 0,
        opacity: 0
      })
      TweenMax.set('.anov-guide .anov-modal-icon', { opacity: 0, scale: 0 })
      TweenMax.set('.anov-guide .anov-modal-btn', { opacity: 0 })
    },
    destroy(params) {
      this.reset()
      if (typeof params.onClose == 'function') {
        params.onClose()
      }
    },
    cancel() {
      localStorage.setItem('anov-guide', 1)
      app.modal.destroy({ componentsName: 'guide' })
    },
    confirm() {
      localStorage.setItem('anov-guide', 1)
      app.panelServer.open()
      app.modal.destroy({ componentsName: 'guide' })
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.anov-guide {
  opacity: 0;
}
.anov-guide-wrapper {
  margin-top: 50px;
  text-align: center;
}
.anov-guide-label {
  font-size: 24px;
  margin-bottom: 20px;
}
.anov-guide-text {
  line-height: 30px;
  font-size: 18px;
  width: 86%;
  margin: 0 auto;
  text-align: left;
  .anov-guide-point {
    font-size: 22px;
    color: rgba(222, 90, 84, 1);
  }
  i:hover {
    cursor: pointer;
    text-decoration: underline;
  }
}
.anov-guide-btn {
  position: relative;
  height: 50px;
  .anov-modal-btn {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: background-color 0.3s ease-in-out;
    &:nth-child(1) {
      left: 30%;
    }
    &:nth-child(2) {
      right: 30%;
    }
  }
}
</style>
